﻿<%@ Page Title="" Language="C#" MasterPageFile="~/TemplateAdmin.Master" AutoEventWireup="true" CodeBehind="EditProduct.aspx.cs" Inherits="Photocopy.EditProduct" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    
    <script src="Scripts/tooltip.js"></script>
    <style type="text/css">
        #modalContainer {
	        background-color:transparent;
	        position:absolute;
	        width:100%;
	        height:100%;
	        top:0px;
	        left:0px;
	        z-index:10000;
        }
 
        #alertBox {
	        position:relative;
	        width:300px;
	        min-height:100px;
	        margin-top: 200px;
            border: 1px solid rgba(0,0,0,.2);
            border-radius: 6px;
            background-color: #fff;
        }
 
        #modalContainer > #alertBox {
	        position:fixed;
        }
 
        #alertBox h1 {
	        margin:0;
	        font-weight: bold;
            font-size: 16px;
            background-color: #f0ad4e;
            color: #FFF;
            border-bottom: 1px solid #eee;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            padding: 10px;
        }
 
        #alertBox p {
	        height: 30px;
            text-align: center;
            margin-top: 10px;
       
        }
 
        #alertBox #closeBtn {
	        display:block;
	        position:relative;
	        margin: 10px auto;
            padding: 4px;
            border: 1px solid #eee;
            border-radius: 4px;
            width: 20%;
            text-transform: uppercase;
            text-align: center;
            vertical-align: middle;
            color: #000;
            background-color: #fff;
            text-decoration:none;
        }
        #alertBox #closeBtn:hover{
            color: #333;
            background-color: #ebebeb;
            border-color: #adadad;
        }
 
        /* unrelated styles */
 
        #mContainer {
	        position:relative;
	        width:600px;
	        margin:auto;
	        padding:5px;
	        border-top:2px solid #000;
	        border-bottom:2px solid #000;
	        font:0.7em verdana,arial;
        }
    </style>
    <script type="text/javascript">

        var ALERT_TITLE = "Thông báo";
        var ALERT_BUTTON_TEXT = "Ok";

        if (document.getElementById) {
            window.alert = function (txt) {
                createCustomAlert(txt);
            }
        }

        function createCustomAlert(txt) {
            d = document;

            if (d.getElementById("modalContainer")) return;

            mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
            mObj.id = "modalContainer";
            mObj.style.height = d.documentElement.scrollHeight + "px";

            alertObj = mObj.appendChild(d.createElement("div"));
            alertObj.id = "alertBox";
            if (d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
            alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth) / 2 + "px";
            alertObj.style.visiblity = "visible";

            h1 = alertObj.appendChild(d.createElement("h1"));
            h1.appendChild(d.createTextNode(ALERT_TITLE));

            msg = alertObj.appendChild(d.createElement("p"));
            //msg.appendChild(d.createTextNode(txt));
            msg.innerHTML = txt;

            btn = alertObj.appendChild(d.createElement("a"));
            btn.id = "closeBtn";
            btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
            btn.href = "#";
            btn.focus();
            btn.onclick = function () { removeCustomAlert(); return false; }

            alertObj.style.display = "block";

        }

        function removeCustomAlert() {
            document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
        }
        if (document.getElementById) {
            window.confirm = function (mess, title, okBtnText, cancelBtnText, iconType) {
                return CustomConfirm(mess, title, okBtnText, cancelBtnText, iconType);
            }
        }


        function CustomConfirm(mess, title, okBtnText, cancelBtnText, iconType) {
            this.mess = (mess == null ? '' : mess);
            this.title = (title == null ? 'Info' : title);
            this.okBtnText = (okBtnText == null ? 'Agree' : okBtnText);
            this.cancelBtnText = (cancelBtnText == null ? 'Do not Agree' : cancelBtnText);
            this.iconType = (iconType == null ? 1 : iconType);


            d = document;
            if (d.getElementById("divCustomConfirm")) return;
            mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
            mObj.id = "divCustomConfirm";
            mObj.style.position = "absolute";
            mObj.style.width = "100%";
            mObj.style.height = "100%";
            mObj.style.top = "0px";
            mObj.style.left = "0px";
            mObj.style.zIndex = "1001";
            mObj.style.backgroundColor = "transparent";
            
            alertObj = mObj.appendChild(d.createElement("div"));
            alertObj.id = "confirmBox";
            alertObj.style.position = "absolute";
            alertObj.style.width = "auto";
            alertObj.style.height = "auto";
            alertObj.style.minWidth = "300px";
            alertObj.style.minHeight = "100px";
            alertObj.style.top = d.documentElement.clientHeight / 3 + "px";  //cần động cột này theo màn hình trình duyệt
            if (d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
            alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth) / 2 + "px";
            alertObj.style.border = "1px solid #000000";
            alertObj.style.backgroundColor = "#FFFFFF";
            alertObj.style.backgroundRepeat = "no-repeat"; //no repeat icon in alertBox div
            alertObj.style.backgroundPosition = "10px 30px"; //position of icon
            alertObj.style.visiblity = "visible";
            

            h1 = alertObj.appendChild(d.createElement("h1"));
            h1.appendChild(d.createTextNode(this.title));
            h1.style.marginTop = "0px";
            h1.style.font = "bold 1em verdana,arial";
            h1.style.backgroundImage = "url(http://lh4.ggpht.com/_yy5LQxtxYo0/SoKRR2bCCXI/AAAAAAAAAZc/LsAvrSLBXac/s128/bgtitle.png)";
            h1.style.backgroundRepeat = "repeat";
            h1.style.backgroundPosition = "0px 0px";
            h1.style.color = "#FFFFFF";
            h1.style.borderBottom = "1px solid #000000";
            h1.style.padding = "2px 0px 2px 5px";


            msg = alertObj.appendChild(d.createElement("div"));
            msg.innerHTML = this.mess;
            msg.style.font = "1em verdana,arial";
            msg.style.height = "auto";
            msg.style.width = "auto";
            msg.style.minHeight = "50px"
            msg.style.textAlign = "center";


            tbl = alertObj.appendChild(d.createElement("table"));
            tbl.style.width = "100%";
            tr = tbl.appendChild(d.createElement("tr"));
            tdleft = tr.appendChild(d.createElement("td"));
            tdleft.style.textAlign = "right";
            tdright = tr.appendChild(d.createElement("td"));
            tdright.style.textAlign = "left";


            okBtn = tdleft.appendChild(d.createElement("a"));
            okBtn.id = "okBtn";
            okBtn.appendChild(d.createTextNode(this.okBtnText));
            okBtn.href = "#";
            okBtn.focus();
            okBtn.onclick = function () { RemoveCustomElementById("divCustomConfirm"); return true; }
            okBtn.style.display = "block";
            okBtn.style.position = "relative";
            okBtn.style.margin = "5px auto";
            okBtn.style.padding = "3px";
            okBtn.style.border = "1px solid #000000";
            okBtn.style.width = "70px";
            okBtn.style.font = "1em verdana, arial";
            okBtn.style.textTransform = "none";
            okBtn.style.textAlign = "center";
            okBtn.style.color = "#FFFFFF";
            okBtn.style.textDecoration = "none";
            okBtn.style.backgroundImage = "url(http://lh3.ggpht.com/_yy5LQxtxYo0/SoKRRjvi6yI/AAAAAAAAAZY/4lBkeAJr3hg/s128/bgbutton.PNG)";
            okBtn.style.backgroundRepeat = "repeat";
            okBtn.style.backgroundPosition = "0px 0px";
            

            cancelBtn = tdright.appendChild(d.createElement("a"));
            cancelBtn.id = "cancelBtn";
            cancelBtn.appendChild(d.createTextNode(this.cancelBtnText));
            cancelBtn.href = "#";
            cancelBtn.focus();
            cancelBtn.onclick = function () { RemoveCustomElementById("divCustomConfirm"); return false; }
            cancelBtn.style.display = "block";
            cancelBtn.style.position = "relative";
            cancelBtn.style.margin = "5px auto";
            cancelBtn.style.padding = "3px";
            cancelBtn.style.border = "1px solid #000000";
            cancelBtn.style.width = "70px";
            cancelBtn.style.font = "1em verdana, arial";
            cancelBtn.style.textTransform = "none";
            cancelBtn.style.textAlign = "center";
            cancelBtn.style.color = "#FFFFFF";
            cancelBtn.style.textDecoration = "none";
            cancelBtn.style.backgroundImage = "url(http://lh3.ggpht.com/_yy5LQxtxYo0/SoKRRjvi6yI/AAAAAAAAAZY/4lBkeAJr3hg/s128/bgbutton.PNG)";
            cancelBtn.style.backgroundRepeat = "repeat";
            cancelBtn.style.backgroundPosition = "0px 0px";


            alertObj.style.display = "block";
        }


        function RemoveCustomElementById(mId) {
            document.getElementsByTagName("body")[0].removeChild(document.getElementById(mId));
            return true;
        }
        
    </script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form runat="server">

    <div class="back-home">
        <asp:LinkButton ID="linkBackHome" OnClick="linkBackHome_Click" runat="server"><img src="Images/back.png" /> Quay lại</asp:LinkButton>
    </div>

    <h4 class="subheader">
		Thông tin sản phẩm
	</h4>
    <div class="edit-product-detail">
        <div class="product-detail-title">
            <div class="title-1 display-inline">
                <p>#</p>
            </div>
            <div class="title-2 display-inline">
                <p>Thông tin</p>
            </div>
        </div>
        <div class="product-detail-info">
            <div class="masanpham">
                <div class="info-1 display-inline">
                    <p>Mã Sản Phẩm</p>
                </div>
                <div class="info-2 display-inline">
                    <asp:TextBox ID="txtMasanpham" Width="20%" CssClass="form-control" runat="server"></asp:TextBox>
                    <asp:Label ID="lbSanphamID" runat="server" Visible="false"></asp:Label>
                </div>
            </div>
            <div class="masanxuat">
                <div class="info-1 display-inline">
                    <p>Mã Sản Xuất</p>
                </div>
                <div class="info-2 display-inline">
                    <asp:TextBox ID="txtMasanxuat" Width="20%" CssClass="form-control" runat="server"></asp:TextBox>
                </div>
            </div>
            <div class="tensanpham">
                <div class="info-1 display-inline">
                    <p>Tên Sản Phẩm</p>
                </div>
                <div class="info-2 display-inline">
                    <asp:TextBox ID="txtTensanpham" CssClass="form-control" runat="server"></asp:TextBox>
                </div>
            </div>
            <div class="dongia">
                <div class="info-1 display-inline">
                    <p>Đơn Giá</p>
                </div>
                <div class="info-2 display-inline">
                    <asp:TextBox ID="txtDongia" Width="50%" CssClass="form-control" runat="server"></asp:TextBox>
                </div>
            </div>
            <div class="soluong">
                <div class="info-1 display-inline">
                    <p>Số Lượng</p>
                </div>
                <div class="info-2 display-inline">
                    <asp:TextBox ID="txtSoluong" Width="20%" CssClass="form-control" runat="server"></asp:TextBox>
                </div>
            </div>
            <div class="ngaynhaphang">
                <div class="info-1 display-inline">
                    <p>Ngày Nhập Hàng</p>
                </div>
                <div class="info-2 display-inline">
                    <asp:TextBox ID="txtNgaynhaphang" Enabled="false" Width="50%" CssClass="form-control" runat="server"></asp:TextBox>
                </div>
            </div>

        </div>
        <div class="pad-10">
            <asp:Button ID="btnUpdateProduct" OnClick="btnUpdateProduct_Click" CssClass="btn btn-success" runat="server" Text="Update" />
        </div>

    </div>
    <hr />
    <h4 class="subheader">
		Thông tin chức năng
	</h4>
    <div class="edit-product-option">
        <div class="product-option-mainoption">
            <div class="product-option-drop display-inline"> 
                <asp:DropDownList ID="dropMainOption" CssClass="form-control dropoption" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dropMainOption_SelectedIndexChanged" data-toggle="tooltip" data-placement="top" title="Main Option"></asp:DropDownList>
            </div>
            <div class="display-inline">
                <button id="btnmenu" type="button" data-toggle="tooltip" data-placement="top" title="..."><img src="Images/chevron-right-32.png" /></button>
            </div>

            <div class="menu" style="display:none">
                <div class="display-inline product-option-imgadd">
                    <asp:Button ID="btnAddMainOption" runat="server" OnClick="btnAddMainOption_Click" CssClass="btn-add btn" data-toggle="tooltip" data-placement="top" title="Add Main Option" />
                </div>
                <div class="display-inline product-option-imgedit">
                    <asp:Button ID="btnEditMainOption" runat="server" Enabled="false" OnClick="btnEditMainOption_Click" CssClass="btn-edit btn" data-toggle="tooltip" data-placement="top" title="Edit Main Option" />
                </div>                
                <div class="display-inline product-option-imgdelete">
                    <asp:Button ID="btnDeleteMainOption" runat="server" Enabled="false" OnClick="btnDeleteMainOption_Click" CssClass="btn-delete btn" data-toggle="tooltip" data-placement="top" title="Delete Main Option" />
                </div>
            </div>
            <div class="confirm display-inline">
                <div class="display-inline m-right" style="border-bottom:1px solid red">
                    <asp:Label ID="lbMessage" Visible="false" runat="server" Text="Bạn có muốn xóa không ?"></asp:Label>
                </div>
                <div class="display-inline">
                    <asp:Button ID="btnOk" runat="server" Visible="false" OnClick="btnOk_Click" CssClass="btn btn-success" Text="Đồng ý"/>
                </div>
                <div class="display-inline">
                    <asp:Button ID="btnCancle2" runat="server" Visible="false" OnClick="btnCancle2_Click" CssClass="btn btn-warning" Text="Không"/>
                </div>
            </div>
            <div class="display-inline m-right">
                <asp:TextBox ID="txtEditMainOption" Visible="false" CssClass="form-control" runat="server"></asp:TextBox>
                <asp:TextBox ID="txtAddMainOption" Visible="false" placeholder="Nhập chức năng chính" CssClass="form-control" runat="server"></asp:TextBox>
            </div>
            <div class="display-inline">
                <asp:Button ID="btnUpdateMainOption" Visible="false" CssClass="btn btn-success" OnClick="btnUpdateMainOption_Click" runat="server" Text="Update" />
                <asp:Button ID="btnAddMainOptionSuccess" Visible="false" OnClick="btnAddMainOptionSuccess_Click" CssClass="btn btn-success" runat="server" Text="Add" />
                <asp:Button ID="btnCancle1" runat="server" Visible="false" OnClick="btnCancle1_Click" CssClass="btn btn-warning" Text="Cancle" />
            </div>
        </div>

        <div class="product-option-options">
            <asp:Repeater ID="RptOption" runat="server" OnItemCommand="RptOption_ItemCommand">
                <HeaderTemplate>
                    <table class="table table-hover" id="table">
				        <thead>
                            <tr>
                                <th>#</th>
							    <th style="width:35%">Tên Chức Năng</th>
							    <th style="width:45%">Chi Tiết Chức Năng</th>
							    <th class="image-button">Action</th>
						    </tr>
					    </thead>
					    <tbody>
                </HeaderTemplate>
                <ItemTemplate>
                        <tr>
                            <td><%#Eval("ID") %><asp:Label ID="lbOptionID" runat="server" Visible="false" Text='<%#Eval("OptionID") %>'></asp:Label></td>
                            <td><asp:Label ID="lbOptionName" runat="server" Text='<%#Eval("OptionName") %>' /><asp:TextBox ID="txtOptionNameUpdate" CssClass="form-control" runat="server" Visible="false" Text='<%#Eval("OptionName") %>'></asp:TextBox></td>
                            <td><asp:Label ID="lbOptions" runat="server" Text='<%#Eval("OptionDescription") %>' /><asp:TextBox ID="txtOptionUpdate" CssClass="form-control" runat="server" Visible="false" Text='<%#Eval("OptionDescription") %>'></asp:TextBox></td>                                            
                            <td class="image-button">                                 
                                <asp:ImageButton ID="imgBtnEdit" ImageUrl="~/Images/Edit.png" CommandName="Edit" CommandArgument="<%#Container.ItemIndex %>" runat="server" data-toggle="tooltip" data-placement="top" title="Edit option" />
                                <asp:Button ID="btnUpdate" CssClass="btn btn-success" runat="server" Visible="false" Text="Update" CommandName="Update" CommandArgument="<%#Container.ItemIndex %>" />
                                <asp:ImageButton ID="imgBtnDelete" ImageUrl="~/Images/Delete.png" CommandName="Delete" CommandArgument="<%#Container.ItemIndex %>" runat="server" data-toggle="tooltip" data-placement="top" title="Delete option" />
                            </td>
                        </tr>
                </ItemTemplate>
                <FooterTemplate>
                        </tbody>
                    </table>
                </FooterTemplate>


            </asp:Repeater>

            <div class="options-add alert alert-info" role="alert">
                <div class="display-inline m-right" style="padding:6px;">
                    <h4 class="display-inline"><span class="label label-warning">Thêm chức năng</span></h4>
                    <button id="btnmenu1" type="button" data-toggle="tooltip"  data-placement="top" class="display-inline" title="..."><img src="Images/chevron-right-32-small.png" /></button>
                </div>
                <div class="menu1" style="display:none">
                    <div class="display-inline m-right">
                        <asp:TextBox ID="txtOptionNameAdd" CssClass="form-control" Enabled="false" placeholder="Tên chức năng" runat="server"></asp:TextBox>
                    </div>
                    <div class="display-inline m-right">
                        <asp:TextBox ID="txtOptionDescriptionAdd" CssClass="form-control" Enabled="false" placeholder="Chi tiết" runat="server"></asp:TextBox>
                    </div>                
                    <div class="display-inline product-option-imgdelete">
                        <asp:Button ID="btnAddOption" runat="server" OnClick="btnAddOption_Click" Enabled="false" CssClass="btn-success btn" Text="Thêm" data-toggle="tooltip" data-placement="top" title="Add Option" />
                    </div>
                </div>
                        
            </div>
        </div>
    </div>

    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var state = true;
            var state1 = true;
            $("#btnmenu").click(function () {
                if (state) {
                    $(".menu").addClass("effect");
                    state = false;
                } else {
                    $(".menu").removeClass("effect");
                    state = true;
                }
            });
            $("#btnmenu1").click(function () {
                if (state) {
                    $(".menu1").addClass("effect");
                    state = false;
                } else {
                    $(".menu1").removeClass("effect");
                    state = true;
                }
            });
        });

    </script>

</form>
</asp:Content>
